<template>
  <div class="topic">
    <div class="title">
      <h3>{{topicNum+1}}.</h3>
      <el-tag
        :type="getTopicTag(topic.type).tag"
        effect="dark">
        {{getTopicTag(topic.type).name}}
      </el-tag>
      <word-audio v-if="topic.isSound==='1'" :word="topic.title">
        根据读音选出下列对应选项
      </word-audio>
      <h3 v-else v-html="topic.title"></h3>
    </div>
    <el-image v-if="topic.pic" :src="baseUrl+topic.pic"
              :preview-src-list="[baseUrl+topic.pic]"></el-image>
    <option-group style="padding-left: 40px" :topic="topic" :topic-num="topicNum"></option-group>
  </div>
</template>

<script>
  import {getTopicTag} from '@/util/function'
  import OptionGroup from "@/view/answer/option"
  import WordAudio from "@/components/wordAudio"

  export default {
    name: "topic",
    components: {WordAudio, OptionGroup},
    props: ['topicNum', 'topic'],
    methods: {
      getTopicTag,
    },
  }
</script>

<style scoped>
  .topic {
    padding: 0 20px;
    overflow-x: scroll;
  }

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .topic .el-image {
    width: 150px;
    /*margin-left: 40px;*/
    margin: 0 0 15px 40px;
  }

  .title > .el-tag {
    margin: 0 10px;
    align-self: baseline;
  }

  h3 {
    cursor: pointer;
    user-select: none;
  }

  .title > h3:first-child {
    width: 30px;
    align-self: baseline;
  }
</style>
